<template>
    <div id="backcont">
        <div class="meituan-content">
            <div class="login-cont">
                <div class="meituan-title">点餐后台管理系统</div>
                <div class="meituan-user">
                    <p>账号</p>
                    <el-input clearable v-model="account" class="inptflex" placeholder="请输入账号" />
                </div>
                <div class="meituan-user">
                    <p>密码</p>
                    <el-input show-password v-model="password" class="inptflex" placeholder="密码" />
                </div>
                <!-- 登录和注册按钮的切换 -->
                <div class="reg-view">
                    <p @click=" regi = regi == '登录' ? '注册' : '登录'">{{regi}}</p>
                </div>
                <el-button @click="signin" class="meituan-btn" v-if="regi === '注册'" type="success" :loading="loading">登录
                </el-button>
                <el-button @click="register" class="meituan-btn" v-else type="success" :loading="loading">注册</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
export default {
    name:'login',
    setup () {
        const router = useRouter()
        const {proxy} = getCurrentInstance()
        const user = reactive({
            account:'',
            password:'',
            regi:'注册',
            loading:false
        })

        // 登录请求
        const signin = async() =>{
            user.loading = true
            const obj = { account: user.account, password: user.password }
            const res = await new proxy.$request(proxy.$urls.m().login, obj).modepost()
            // console.log(res);
            try {
                if (res.status !== 200) {
                    new proxy.$tips(res.data.msg, "warning").mess_age()
                } else {
                    //    跳转到主页面
                    let ids = '1'
                    localStorage.setItem('token',res.data.data.token)
                    localStorage.setItem('menuid',JSON.stringify(ids))
                    router.push({name:'index',})

                }
                user.loading = false
            } catch (error) {
                user.loading = false
                new proxy.$tips('服务器发生错误哦', "warning").mess_age()
            }
        }

        // 注册请求
        const register = async() =>{
            user.loading = true
            const obj = {account:user.account,password:user.password}
            const res = await new proxy.$request(proxy.$urls.m().register, obj).modepost()
            // console.log(res);
            try {
                if (res.status !== 200) {
                    new proxy.$tips(res.data.msg, "error").mess_age()
                } else {
                    user.regi = '登录'
                }
                user.loading = false
            } catch (error) {
                user.loading = false
                new proxy.$tips('服务器发生错误', "error").mess_age()
            }
            
        }



        return { ...toRefs(user), signin, register}
    }
}
</script>

<style lang="scss" scoped>

</style>